<template>
<div class="system-edit-user-container">
    <vxe-modal :title="'修改用户外部信息---'+username" v-model="isShowDialog" width="1024" >
<vxe-grid ref='xGrid' v-bind="gridOptions" ></vxe-grid>
    </vxe-modal>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent,ref,unref } from 'vue';
import { extendUserList, extendUserEdit, extendUserDelete} from "/@/api/system/user";
import {ElMessage} from "element-plus";
import {  VxeGridInstance, VxeGridProps } from 'vxe-table'
import XEUtils from 'xe-utils'

export default defineComponent({
	name: 'systemExtendEditUser',
	setup(prop,{emit}) {
    const xGrid = ref<VxeGridInstance>()

		const state = reactive({
			isShowDialog: false,
      userid:0,
      username:'',
		});
    const gridOptions = reactive<VxeGridProps>({
      border: true,
      showHeaderOverflow: true,
      showOverflow: true,
      keepSource: true,
      id: 'full_edit_1',
      height: 600,
      rowConfig: {
        keyField: 'id',
        isHover: true
      },
      columnConfig: {
        resizable: true
      },
      sortConfig: {
        trigger: 'cell',
        remote: true
      },
      pagerConfig: {
        pageSize: 10,
        pageSizes: [10, 20,]
      },
      toolbarConfig: {
        buttons: [
          { code: 'insert_actived', name: '新增' },
          { code: 'delete', name: '直接删除' },
          { code: 'save', name: '保存', status: 'success' }
        ],
        refresh: true,
      },
      proxyConfig: {
        seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
        sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
        filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
        form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
        // 对应响应结果 { result: [], page: { total: 100 } }
        props: {
          result: 'result', // 配置响应结果列表字段
          total: 'page.total' // 配置响应结果总页数字段
        },
        // 只接收Promise，具体实现自由发挥
        ajax: {
          // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
          query: ({ page, form }) => {
            return new Promise(resolve => {
              page = XEUtils.assign(page, form)
              extendUserList(state.userid).then((res) => {
                resolve({
                  result: res.data.list,
                })
              });
            })
          },
          // 当点击工具栏删除按钮或者手动提交指令 delete 时会被触发
          delete: ({ body }) => {
            return new Promise(resolve => {
              const ids= XEUtils.map(body.removeRecords, item => item.id)
              extendUserDelete(ids).then((res) => {
                resolve({ })
              });
            })          },
          // 当点击工具栏保存按钮或者手动提交指令 save 时会被触发
          save: ({ body }) => {
            return new Promise(resolve => {
              const data=body.updateRecords.concat(body.insertRecords)
              extendUserEdit(state.userid, data.map(row=>{row['inid']=state.userid+'';return row})).then((res) => {
                resolve({ })
              });
            })
          }
        }
      },
      columns: [
        { type: 'checkbox', title: 'ID', width:40 },
        { field: 'id', title: 'ID', width:80 ,editRender: { name: 'number',defaultValue:0,props: {readonly:true}} },
        { field: 'type',  visible: false,  editRender: { name: 'input',defaultValue:'user'} },
        { field: 'cate', title: '类型', width: 100, editRender: { name: '$select',options:[{value: 'wxwork', label: '企业微信'},{value: 'dingtalk', label: '钉钉'},{value: 'U8', label: '用友'}],props:{transfer:true}}, },
        { field: 'inid',      visible: false,  },
        { field: 'outid1', title: '外部关键字1',  editRender: { name: '$input',defaultValue:null} },
        { field: 'outid2', title: '外部关键字2',  editRender: { name: '$input',defaultValue:null} },
        { field: 'outid3', title: '外部关键字3',  editRender: { name: '$input',defaultValue:null} },
        { field: 'outid4', title: '外部关键字4',  editRender: { name: '$input',defaultValue:null} },
        { field: 'outid5', title: '外部关键字5',  editRender: { name: '$input',defaultValue:null} },
      ],
      checkboxConfig: {
        reserve: true,
        highlight: true,
        range: true
      },
      editRules: {
        cate: [
          { required: true, message: '类型必须填写' },
        ],
      },
      editConfig: {
        trigger: 'click',
        mode: 'row',
        showStatus: true
      }
    })
		// 打开弹窗
		const openDialog = (user?:any) => {
      console.log(user)
      if(user.id>0) {
        state.userid=user.id
      }
			state.username = user.userNickname;
			state.isShowDialog = true;
      const $grid = xGrid.value
      if($grid!==undefined){
        $grid.commitProxy('query')
      }
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增

		return {
			openDialog,
			closeDialog,
			onCancel,
      xGrid,
      gridOptions,
			...toRefs(state),
		};
	},
});
</script>
